<template>
	<div :class="webConfigStore.layout.layoutMode" class="nav-menus">

		<!-- 首页 -->
		<el-tooltip :hide-after="0" :show-after="200" content="首页" effect="dark" placement="bottom">
			<div class="nav-menu-item" @click="routePush({name: 'Dashboard'})">
				<icon :color="webConfigStore.getColorVal('headerBarTabColor')" class="nav-menu-icon icon"
				      name="el-icon-HomeFilled" size="20"/>
			</div>
		</el-tooltip>

		<!-- 切换语言 -->
		<el-dropdown v-if="!isVisitor()" :hide-on-click="true" :hide-timeout="200" :show-timeout="200" class="h100" placement="bottom" size="large" trigger="hover"
		             @visible-change="onCurrentNavMenu($event, 'lang')">
			<div :class="state.currentNavMenu === 'lang' ? 'hover' : ''" class="nav-menu-item pt2">
				<icon :color="webConfigStore.getColorVal('headerBarTabColor')" class="nav-menu-icon icon" name="local-cus-lang"
				      size="20"/>
			</div>
			<template #dropdown>
				<el-dropdown-menu class="dropdown-menu-box">
					<el-dropdown-item v-for="item in webConfigStore.lang.langArray" :key="item.value" @click="switchLang(item.value)">
						{{ item.name }}
					</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>

		<!-- 全屏 -->
		<el-tooltip :hide-after="0" :show-after="200" content="F11 切换全屏" effect="dark" placement="bottom">
			<div :class="navTabsStore.tabFullScreen ? 'hover' : ''" class="nav-menu-item" @click="onFullScreen">
				<icon v-if="navTabsStore.tabFullScreen" :color="webConfigStore.getColorVal('headerBarTabColor')"
				      class="nav-menu-icon icon" name="local-cus-exit-fullscreen" size="16"/>
				<icon v-else :color="webConfigStore.getColorVal('headerBarTabColor')" class="nav-menu-icon icon"
				      name="local-cus-fullscreen" size="16"/>
			</div>
		</el-tooltip>

		<!-- 网站设置 -->
		<el-tooltip v-if="!isVisitor()" :hide-after="0" :show-after="200" content="网站设置" effect="dark" placement="bottom">
			<div class="nav-menu-item" @click="webConfigStore.setLayout('showDrawer', true)">
				<icon :color="webConfigStore.getColorVal('headerBarTabColor')" class="nav-menu-icon icon" name="fa fa-cogs" size="18"/>
			</div>
		</el-tooltip>

		<!-- 个人信息 -->
		<el-popover :hide-after="200" :show-after="200" :width="260" placement="bottom-end" popper-class="admin-info-box" trigger="hover"
		            @hide="onCurrentNavMenu(false, 'profile')" @show="onCurrentNavMenu(true, 'profile')">
			<template #reference>
				<div :class="state.currentNavMenu === 'profile' ? 'hover' : ''" class="admin-info" @click="toProfilePage">
					<el-image :src="handleAvatarUrl(userStore.avatar) || IMAGE_URL.defaultAvatar" fit="contain" style="width: 25px;border-radius: 5px"></el-image>
					<div class="admin-name">{{ userStore.nickname }}</div>
				</div>
			</template>
			<div>
				<div class="admin-info-base">
					<el-image :src="handleAvatarUrl(userStore.avatar) || IMAGE_URL.defaultAvatar" fit="contain" style="width: 70px;border-radius: 5px"></el-image>
					<div class="admin-info-other">
						<div class="admin-info-name">{{ userStore.nickname }}</div>
					</div>
				</div>
				<div class="admin-info-footer">
					<el-button plain type="primary" @click="toProfilePage">{{ $t('route.profile') }}</el-button>
					<el-button :loading="loading" plain type="danger" @click="onLogout">退出登录</el-button>
				</div>
			</div>
		</el-popover>

		<config/>

	</div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import screenFull from 'screenfull'
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {ElMessage} from 'element-plus'
import Config from './config.vue'
import {routePush} from '@/utils/routeUtil'
import {useUserStore} from '@/stores/modules/user.store'
import {useRoute} from 'vue-router'
import {useNavTabsStore} from '@/stores/modules/navTabs.store'
import {IMAGE_URL} from '@/utils/constantsUtil'
import Icon from '@/components/icon.vue'
import {i18n, loadLang} from '@/lang'
import {saveUserConfigApi} from '@/api/system/webConfig.api'
import {handleAvatarUrl, messageSuccess, messageWarning} from '@/utils/commonUtil'
import {isVisitor} from '@/utils/authUtil'
import {Local} from '@/utils/storageUtil'
import {cacheKeys} from '@/stores/constant/cacheKey'

const loading = ref(false)
const userStore = useUserStore()
const webConfigStore = useWebConfigStore()
const navTabsStore = useNavTabsStore()
const currentRoute = useRoute()
const state = reactive({
	currentNavMenu: '',
	showLayoutDrawer: false
})

const switchLang = (lang: string) => {
	if (lang !== i18n.global.locale.value) {
		loadLang(lang)
		if (lang === 'en') {
			messageWarning('English translation is not complete, please understand!（英文翻译尚不完整，敬请谅解！）')
		}
		// 将用户的语言配置持久化到数据库
		const config: SaveUserConfigRequest = {
			userId: userStore.userId,
			language: webConfigStore.lang.defaultLang
		}
		saveUserConfigApi(config).then(() => {
			messageSuccess('您的设置已保存')
		})
	}
}

const onCurrentNavMenu = (status: boolean, name: string) => {
	state.currentNavMenu = status ? name : ''
}

const onFullScreen = () => {
	if (!screenFull.isEnabled) {
		ElMessage.warning('您的浏览器不支持全屏，请更换浏览器再试~')
		return
	}
	screenFull.toggle()
}

const toProfilePage = () => {
	routePush({name: 'Profile'})
}

const onLogout = async () => {
	loading.value = true
	await userStore.logout()
	Local.remove(cacheKeys.TOKEN)
	// 如果携带路径参数注销，则loginTo使用fullPath，否则使用path
	// await routePush({path: '/login', query: {loginTo: currentRoute.fullPath}})
	await routePush({path: '/login', query: {loginTo: currentRoute.path}})
	loading.value = false
}
</script>

<style lang="scss" scoped>
.nav-menus.Default {
	border-radius: var(--el-border-radius-base);
	box-shadow: var(--el-box-shadow-light);
}

.nav-menus {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: v-bind('webConfigStore.getColorVal("headerBarBackground")');
	height: 100%;
	margin-left: auto;

	.nav-menu-item {
		align-items: center;
		cursor: pointer;
		display: flex;
		height: 100%;
		justify-content: center;
		width: 40px;

		.nav-menu-icon {
			box-sizing: content-box;
			color: v-bind('webConfigStore.getColorVal("headerBarTabColor")');
		}

		&:hover {
			.icon {
				animation: twinkle 0.3s ease-in-out;
			}
		}
	}

	.admin-info {
		align-items: center;
		color: v-bind('webConfigStore.getColorVal("headerBarTabColor")');
		cursor: pointer;
		display: flex;
		height: 100%;
		padding: 0 10px;
		user-select: none;
	}

	.admin-name {
		padding-left: 6px;
		white-space: nowrap;
	}

	.nav-menu-item:hover,
	.admin-info:hover,
	.nav-menu-item.hover,
	.admin-info.hover {
		background: v-bind('webConfigStore.getColorVal("headerBarHoverBackground")');
	}
}

.dropdown-menu-box :deep(.el-dropdown-menu__item) {
	justify-content: center;
}

.admin-info-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 10px;

	.admin-info-other {
		display: block;
		padding: 10px 0;
		text-align: center;
		width: 100%;

		.admin-info-name {
			font-size: var(--el-font-size-large);
		}
	}
}

.admin-info-footer {
	display: flex;
	justify-content: space-around;
	margin: 0 -12px -12px -12px;
	padding: 10px 0;
}

.pt2 {
	padding-top: 2px;
}

@keyframes twinkle {
	0% {
		transform: scale(0);
	}
	80% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
</style>
